<template>
	<view class="container">
		<view v-if="addrlist.length">
			<view class="hader">
				<view class="lists_item" v-for="(item,index) in addrlist">
					<view class="item_tit" @tap="defaultadd(item)">
						<view class="name">Consignee：{{ item.ua_name }}</view>
						<view class="num">{{ item.ua_phone }}</view>
					</view>
					<view class="detailedaddress" @tap="defaultadd(item)">
						{{ item.ua_nation+'-'+ item.ua_district+'-'+item.ua_city+'-'+item.ua_detail}}
					</view>
					<view class="operation">
						<view class="default" @tap="DefaulReceipt(item.id)">
							<image class="img1" v-show="item.ua_state==1" src="../../static/images/xuanzhong.png"></image>
							<image class="img1" v-show="item.ua_state==0" src="../../static/images/weigouxuan.png"></image>
							<view class="defaulttext">Default</view>
						</view>
						<view class="edit" @tap="edit(item)">
							<image class="img1" src="../../static/images/edit.png"></image>
							<view class="defaulttext">Edit</view>
						</view>
						<view class="edit" style="margin-left: 10rpx;" @tap="deleteaddr(item.id)">
							<image class="img1" src="../../static/images/delete.png"></image>
							<view class="defaulttext">Delete</view>
						</view>
					</view>
				</view>
			</view>   
		</view>

		<view v-else>
			<image class="bg" src="../../static/images/null.png"></image>
			<view class="null">No shipping address has been found</view>
		</view>
		<view class="add_dz" @tap="addopen">Add address</view>
		<!-- 弹框 -->
		<uni-popup ref="addresspopup">
			<view class="addresspopup">
				<view class="hadertit">Add The Shipping Address</view>
				<view class="option_item">  
					<view class="name">Full name</view>
					<input class="inputtext" v-model="name" :placeholder-style="placeholder" placeholder="Enter the consignee's name"/>
				</view>
				<!-- <view class="option_item" style="display: block;border: none;height: 160rpx;">  
					<view class="name" style="width: 600rpx;">Full name (First and Last name)</view>
					<input class="inputtext" style="margin-top: 0;" v-model="name" :placeholder-style="placeholder" placeholder="Enter the consignee's name"/>
				</view> -->
				<view class="option_item">  
					<view class="name">Phone</view>
					<input class="inputtext" v-model="phone" type="number" :placeholder-style="placeholder" placeholder="Consignee phone number"/>
				</view>

				<view class="option_item">  
					<view class="name">State</view>
					<uni-data-select
						v-model="ua_district"
						:localdata="range"
						@change="changeselect"
						:clear="false"
					></uni-data-select>
					<!-- <input class="inputtext" v-model="ua_district" :placeholder-style="placeholder" placeholder="Please fill in your region"/> -->
				</view>
				<view class="option_item">  
					<view class="name">City</view>
					<input class="inputtext" v-model="ua_city" :placeholder-style="placeholder" placeholder="Please fill in your country"/>
				</view>
				<view class="option_item">  
					<view class="name">ZIP Code</view>
					<input class="inputtext" v-model="ua_postcode" :placeholder-style="placeholder" placeholder="Please fill in the ZIP code"/>
				</view>
				<view class="option_item" style="display: block;border: none;">  
					<view class="name" style="width: 300rpx;">Detailed Address</view>
					<input class="inputtext" style="margin-top: 0;"  v-model="ua_detail" :placeholder-style="placeholder" placeholder="Please fill in the full detailed address"/>
				</view>
				<view class="submit" @tap="addaddress">Save</view>
				<image class="close" @tap="closeaddresspopup" src="../../static/images/close2.png"></image>
			</view>
		</uni-popup>
		<!-- 弹框 -->
		<uni-popup ref="modifypopup">
			<view class="addresspopup">
				<view class="hadertit">Modify the shipping address</view>
				<view class="option_item">  
					<view class="name">Full name</view>
					<input class="inputtext" v-model="name" :placeholder-style="placeholder" placeholder="Enter the consignee's name"/>
				</view>
				<view class="option_item">  
					<view class="name">Phone</view>
					<input class="inputtext" v-model="phone" type="number" :placeholder-style="placeholder" placeholder="Consignee phone number"/>
				</view>
				<view class="option_item">  
					<view class="name">State</view>
					<uni-data-select
						v-model="ua_district"
						:localdata="range"
						@change="changeselect"
						:clear="false"
					></uni-data-select>
					<!-- <input class="inputtext" v-model="ua_district" :placeholder-style="placeholder" placeholder="Please fill in your region"/> -->
				</view>
				<view class="option_item">  
					<view class="name">City</view>
					<input class="inputtext" v-model="ua_city" :placeholder-style="placeholder" placeholder="Please fill in your country"/>
				</view>
				<view class="option_item">  
					<view class="name">ZIP Code</view>
					<input class="inputtext" v-model="ua_postcode" :placeholder-style="placeholder" placeholder="Please fill in the ZIP code"/>
				</view>
				<view class="option_item" style="display: block;border: none;">  
					<view class="name" style="width: 300rpx;">Detailed Address</view>
					<input class="inputtext" style="margin-top: 0;"  v-model="ua_detail" :placeholder-style="placeholder" placeholder="Please fill in the full detailed address"/>
				</view>
				<view class="submit" @tap="sureedit">verify</view>
				<image class="close" @tap="closemodifypopup" src="../../static/images/close2.png"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { getrequest, postrequest,EventStatistics } from '../../util/api'	
	export default {
		data() { 
			return {
				placeholder:"fontSize: '28rpx';color:'rgba(110, 110, 110, 1)';",
				propid:'', //传过来的id
				addrlist:[], //地址列表
				name:'',
				phone:'',
				itemid:'',
				ua_nation:'USA', //国家
				ua_district:'Alabama',  // 州
				ua_city:'',  // 城市
				ua_detail:'',  //详细地址
				ua_postcode:'', //邮编
				range: [
					{ value: 'Alabama', text: "Alabama" },
					{ value: 'Alabama', text: "Alaska" },
					{ value: 'Arizona', text: "Arizona" },
					{ value: 'Arkansas', text: "Arkansas" },
					{ value: 'California', text: "California" },
					{ value: 'California', text: "Colorado" },
					{ value: 'Connecticut', text: "Connecticut" },
					{ value: "Delaware", text: "Delaware" },
					{ value: "Florida", text: "Florida" },
					{ value: "Georgia", text: "Georgia" },
					{ value: "Hawaii", text: "Hawaii" },
					{ value: "Idaho", text: "Idaho" },
					{ value: "Illinois", text: "Illinois" },
					{ value: "Indiana", text: "Indiana" },
					{ value:  "Iowa", text: "Iowa" },
					{ value: "Kansas", text: "Kansas" },
					{ value: "Kentucky", text: "Kentucky" },
					{ value: "Louisiana", text: "Louisiana" },
					{ value: "Maine" , text: "Maine" },
					{ value: "Maryland", text: "Maryland" },
					{ value: "Massachusetts", text: "Massachusetts" },
					{ value: "Michigan", text: "Michigan" },
					{ value: "Minnesota" , text: "Minnesota" },
					{ value: "Mississippi", text: "Mississippi" },
					{ value: "Missouri", text: "Missouri" },
					{ value: "Montana" , text: "Montana" },
					{ value:  "Nebraska", text: "Nebraska" },
					{ value: "Nevada", text: "Nevada" },
					{ value: "New Hampshire" , text: "New Hampshire" },
					{ value: "New Jersey", text: "New Jersey" },
					{ value: "New Mexico", text: "New Mexico" },
					{ value: "New York", text: "New York" },
					{ value: "North Carolina", text: "North Carolina" },
					{ value: "North Dakota", text: "North Dakota" },
					{ value: "Ohio" , text: "Ohio" },
					{ value: "Oklahoma" , text: "Oklahoma" },
					{ value:  "Oregon", text: "Oregon" },
					{ value: "Pennsylvania", text: "Pennsylvania" },
					{ value: "Rhode Island", text: "Rhode Island" },
					{ value:  "South Carolina", text: "South Carolina" },
					{ value: "South Dakota", text: "South Dakota" },
					{ value: "Tennessee", text: "Tennessee" },
					{ value: "Texas", text: "Texas" },
					{ value:  "Utah" , text: "Utah" },
					{ value: "Vermont", text: "Vermont" },
					{ value: "Virginia" , text: "Virginia" },
					{ value: "Washington", text: "Washington" },
					{ value: "West Virginia", text: "West Virginia" },
					{ value: "Wisconsin", text: "Wisconsin" },
					{ value: "Wyoming", text: "Wyoming" },
				],
			}
		},
		// 进页面执行
		onLoad(option){
			console.log('option',option)
			this.propid = option.id
			// 请求地址列表
			this.getaddrlist()
			// 事件统计
			EventStatistics('收货地址','收货地址访问')
		},
		// 页面隐藏
		onHide(){
			this.closeaddresspopup()
			this.closemodifypopup()
		},
		onReady(){
			// this.addopen()
		},
		methods: {	
			// 打开增加地址弹框
			addopen(){
				// 事件统计
				EventStatistics('收货地址','添加收货地址弹框')
				this.$refs.addresspopup.open('center')
			},
			// 关闭弹框
			closeaddresspopup(){
				this.$refs.addresspopup.close()
			},
			// 打开修改弹框
			poenmodifypopup(){
				this.$refs.modifypopup.open('center')
			},
			// 关闭修改弹框
			closemodifypopup(){
				this.$refs.modifypopup.close()
			},
			// 选中产品地址
			async defaultadd(item){
				if(!this.propid){
					return
				}
				let params = {
					id:this.propid,
					ua_name:item.ua_name,
					ua_phone:item.ua_phone,
					ua_detail:item.ua_detail, 
					ua_nation:item.ua_nation,
					ua_district:item.ua_district,
					ua_postcode: item.ua_postcode
				}
				const res = await postrequest('/api/winning_record/update_address',params)
				console.log('增加地址',res)
				if( res &&res.code == 200){
					// 返回上个页面
					uni.navigateBack({
						delta: 1
					});

				}
			},
			// 修改收货地址
			async edit(item){
				this.name = item.ua_name
				this.phone = item.ua_phone
				this.ua_detail = item.ua_detail
				this.ua_city = item.ua_city
				this.ua_district = item.ua_district
				this.ua_postcode = item.ua_postcode
				this.itemid = item.id
				// 打开弹框
				this.poenmodifypopup()
			},
			// 点击确认修改
			async sureedit(){
				if(this.name==''||this.phone==''||this.ua_detail==''||this.ua_city==''||this.ua_district==''||this.ua_postcode ==''){
					return uni.showToast({
						title:'Please complete the information',
						icon:'none',
					})
				}
						// 对手机号进行校验
				// const phoneRegex = /^1[3456789]\d{9}$/;
				// 	if(!phoneRegex.test(this.phone)){
				// 		return uni.showToast({
				// 				title: '请输入正确手机号',
				// 				icon: 'none',
				// 				//显示持续时间为 2秒
				// 				duration: 2000
				// 			})
				// 	}
				let params = {
					ua_name:this.name,
					ua_phone:this.phone,
					ua_nation:this.ua_nation,
					ua_district:this.ua_district,
					ua_city:this.ua_city,
					ua_postcode:this.ua_postcode,
					ua_detail:this.ua_detail, 
					id:this.itemid,
				}
				const res = await postrequest('/api/address/update',params)
				console.log('修改地址',res)
				if( res &&res.code == 200){
					this.closemodifypopup()
					// 再次请求列表
					this.getaddrlist()
					uni.showToast({
						title: 'Modified successfully',
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})
					this.ua_city = ''
					this.ua_detail = ''
					
				}
			},

			// 增加地址
			async addaddress(){
				if(this.name==''||this.phone==''||this.ua_detail==''||this.ua_city==''||this.ua_district==''||this.ua_postcode==''){
					return uni.showToast({
						title:'Please complete the information',
						icon:'none',
					})
				}
				// 对手机号进行校验
				// const phoneRegex = /^1[3456789]\d{9}$/;
				// 	if(!phoneRegex.test(this.phone)){
				// 		return uni.showToast({
				// 				title: '请输入正确手机号',
				// 				icon: 'none',
				// 				//显示持续时间为 2秒
				// 				duration: 2000
				// 			})
				// 	}
					// 事件统计
				EventStatistics('收货地址','保存收货地址')
				let params = {
					ua_name:this.name,
					ua_phone:this.phone,
					ua_nation:this.ua_nation,
					ua_district:this.ua_district,
					ua_city:this.ua_city,
					ua_postcode:this.ua_postcode,
					ua_detail:this.ua_detail, 
				}
				const res = await postrequest('/api/address/add',params)
				console.log('增加地址',res)
				if( res &&res.code == 200){
					this.closeaddresspopup()
					// 再次请求列表
					this.getaddrlist()
					this.ua_city = ''
					this.ua_detail = ''
					this.ua_postcode = ''
				}
			},
			// 获取地址列表
			async getaddrlist(){
				let params = {}
				const res = await getrequest('/api/address/list',params)
				console.log('获取地址列表',res)
				if( res &&res.code == 200){
					this.addrlist = res.data
				}
			},
			// 设置默认收货地址
			async DefaulReceipt(id){
				let params = {
					id:id,
					ua_state:1,
				}
				const res = await postrequest('/api/address/set_default',params)
				console.log('更改默认请求方式',res)
				if( res &&res.code == 200){
					// 再次请求列表
					this.getaddrlist()
				}
			},
			// 删除收货地址
			async deleteaddr(id){
				let params = {
					id:id,
				}
				const res = await postrequest('/api/address/delete',params)
				console.log('删除收货地址',res)
				if( res &&res.code == 200){
					// 再次请求列表
					this.getaddrlist()
					uni.showToast({
						title: 'Delete successful',
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})
				}
			},	
			// 选中哪一个州
			changeselect(e){
				console.log('e',this.ua_district)
			},
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100vw;
		max-width: 750rpx;
		min-height: 100vh;
		margin: 0 auto;
		overflow: hidden;
		font-family: '思源黑体';
		background-color: rgba(246, 246, 246, 1);
		.hader{
			width: 750rpx;
			padding: 40rpx 0 0 0;
			margin: 0 auto;
			// border: 1px solid black;
			.lists_item{
				width: 720rpx;
				height: 280rpx;
				border-radius: 8px;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
				margin: 0 auto;
				margin-bottom: 20rpx;
				.item_tit{
					width: 700rpx;
					height: 40rpx;
					margin: 0rpx 10rpx;
					padding-top: 20rpx;
					display: flex;
					.name{
						width: 340rpx;
						height: 40rpx;
						text-align: left;
						margin-left: 10rpx;
						font-size: 28rpx;
						line-height: 40rpx;
						color: rgba(44, 44, 44, 1);
					}
					.num{
						width: 340rpx;
						height: 40rpx;
						text-align: right;
						font-size: 28rpx;
						line-height: 40rpx;
						color: rgba(0, 0, 0, 1);
					}
				}
				.detailedaddress{
					width: 680rpx;
					height: 120rpx;
					margin: 0 auto;
					margin-top: 24rpx;
					border-bottom: 1px solid rgba(242, 242, 242, 1);
					font-size: 24rpx;
					line-height: 40rpx;
					color: rgba(158, 158, 158, 1);
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
					text-overflow: ellipsis;
					max-height: 120rpx;
				}
				.operation{
					width: 700rpx;
					height: 60rpx;
					// border: 1px solid black;
					margin: 0 auto;
					margin-top: 6rpx;
					display: flex;
					.default{
						width: 200rpx;
						height: 60rpx;
						display: flex;
						.img1{
							width: 32rpx;
							height: 32rpx;
							margin: 14rpx;
						}
						.defaulttext{
							width: 150rpx;
							height: 60rpx;
							font-size: 28rpx;
							line-height: 60rpx;
							color: rgba(232, 94, 63, 1);
							text-align: left;
						}
					}
					.edit{
						width: 140rpx;
						height: 60rpx;
						display: flex;
						margin-left: 200rpx;
						.img1{
							width: 40rpx;
							height: 40rpx;
							margin: 14rpx;
						}
						.defaulttext{
							width: 70rpx;
							height: 60rpx;
							font-size: 28rpx;
							line-height: 66rpx;
							color: rgba(44, 44, 44, 1);
						}
					}
				}
			}

		}
		.add_dz{
			width: 670rpx;
			height: 90rpx;
			margin: 0 auto; 
			margin-top: 60rpx;
			border-radius: 30px;
			background: rgba(232, 94, 63, 1);
			font-size: 30rpx;
			line-height: 90rpx;
			color: rgba(255, 255, 255, 1);
			text-align: center;
		}
		.bg{
			width: 300rpx;
			height: 200rpx;
			margin: 175rpx 175rpx 0 230rpx;
		}
		.null{
			width: 500rpx;
			height: 40rpx;
			font-size: 28rpx;
			line-height: 40rpx;
			color: rgba(128, 128, 128, 1);
			margin: 0 auto;
			text-align: center;
		}
		// 新增地址的弹框
		.addresspopup{
			width: 660rpx;
			height: 930rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.hadertit{
				width: 620rpx;
				height: 100rpx;
				border-bottom: 1px solid rgba(242, 242, 242, 1);
				margin: 0 auto;
				font-size: 16px;
				font-weight: 700;
				line-height: 100rpx;
				color: rgba(0, 0, 0, 1);
				text-align: center;
			}
			.option_item{
				width: 620rpx;
				height: 100rpx;
				border-bottom: 1px solid rgba(242, 242, 242, 1);
				margin: 0 auto;
				display: flex;
				.name{
					width: 180rpx;
					height: 100rpx;
					line-height: 100rpx;
					font-size: 14px;
					margin: 1rpx 0 0 10rpx;	
					font-weight: 600;
					color: rgba(44, 44, 44, 1);
					// border: 1px solid black;
				}
				.inputtext{
					width: 450rpx;
					height: 60rpx;
					// border: 1px solid black;
					margin: 22rpx 4rpx;
					font-size: 28rpx;
				}
			}
			.submit{
				width: 600rpx;
				height: 90rpx;
				border-radius: 30px;
				background: rgba(232, 94, 63, 1);
				font-size: 32rpx;
				line-height: 90rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				margin: 0 auto;
				margin-top: 110rpx;
			}
			.close{
				width: 60rpx;
				height: 60rpx;
				margin: 40rpx 0 0 300rpx;
			}
		}
	}
	::v-deep .uni-stat__select{
		margin-left: -14rpx;
		.uni-select{
			border: none;
		}
	}
</style>
